<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <title>能控首页</title>
    <!-- Bootstrap Core and vandor -->
    <link rel="stylesheet" th:href="@{https://www.jq22.com/jquery/bootstrap-4.2.1.css}">
    <link rel="stylesheet" th:src="@{/asset/css/dropify.min.css}">

    <!-- Core css -->
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";position: absolute; left: 93px;}
            .meterList{
                display: none;
            }
        </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1erKiRi0WCrEfgoYFukdATLSvgFP3mIx"></script>
</head>
<body class="font-muli theme-cyan gradient">
<div>

    <!-- Start Main top header -->
    <div id="header_top" class="header_top">
        <div class="container">
            <div class="hleft">
                <a class="header-brand" th:href="@{/}"><i class="fa fa-graduation-cap brand-logo"></i></a>
            </div>
            <div class="hright">
                <a th:href="@{/}" class="nav-link icon settingbar"><i class="fe fe-power"></i></a>
            </div>
        </div>
    </div>
    <div id="allmap"></div>
</div>
<!-- Start Quick menu with more functio -->
<!-- Start Main leftbar navigation -->
<div id="left-sidebar" class="sidebar" style="z-index: 99999;">
    <h5 class="brand-name">能控首页</h5>
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu-uni">水务系统</a></li>
    </ul>

    <div class="tab-content mt-3">
        <div class="tab-pane fade show active" id="menu-uni" role="tabpanel">
            <nav class="sidebar-nav">
                <ul class="metismenu">
                    <li><a th:href="@{/basisposition/selectAll}"><i class="fa fa-black-tie"></i><span>楼栋管理</span></a></li>
                    <li><a th:href="@{/customer/imgIndex}"><i class="fa fa-user-circle-o"></i><span>数据可视化</span></a></li>
                    <li><a th:href="@{/customer/customerList}"><i class="fa fa-users"></i><span>所有用户信息</span></a></li>
                    <li><a href="javascript:void(0)"><i class="fa fa-users"></i><span class="meter">硬件设置</span></a>
                        <ul class="meterList">
                            <li>
                                <a th:href="@{/meter/index}">新建硬件</a>
                            </li>
                            <li>
                                <a th:href="@{/meter/meterView}">表具信息</a>
                            </li>
                        </ul>
                    </li>
                    <li><a th:href="@{/basisposition/select}"><i class="fa fa-graduation-cap"></i><span>账单记录</span></a></li>
                    <li><a th:href="@{/customer/customerInfo}"><i class="fa fa-book"></i><span>个人用户信息</span></a></li>
                    <li><a th:href="@{/infoView}"><i class="fa fa-bullhorn"></i><span>介绍页面</span></a></li>
                </ul>
            </nav>
        </div>
</div>

</div>
</body>
<script th:src="@{/assets/js/lib.vendor.bundle.js}"></script>
<style type="text/css">
    #map img {
        max-width: inherit;
    }
</style>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(118.50, 31.72);
    map.centerAndZoom(point, 15);
    // 编写自定义函数,创建标注
    function addMarker(point){
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    }
    // 随机向地图添加25个标注
    // var bounds = map.getBounds();
    // var sw = bounds.getSouthWest();
    // var ne = bounds.getNorthEast();
    var lngSpan = 118.525355;
    var latSpan = 31.719706;
    addMarker(point);
    // for (var i = 0; i < 25; i ++) {
    //     var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
    //     addMarker(point);
    // }
</script>
<script>
    $(document).ready(function(){
        $(".meter").click(function(){

            $(".meterList").css("display","inline");
        })
    })
</script>
</html>
